<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>新日暮里温泉馆</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/layui.css"  media="all">
  <link rel="stylesheet" href="css/serch.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		   <style>
        /*html, body, #container {
            height: 100%;
            width: 100%;
        }*/

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
		<script src="layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/test1.js" ></script>
<style>
	.test{
		height: 100px;
		font-size:70px; 
		color:black;
		font-family: "biaoti";
		text-align: center;
		}
	.part2{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			margin: 0px auto;
			}
		
		.part{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			height: 460px;
			margin: 0px auto;
			}
			.part1{
				color:#3F3F3F;
				font-family: "zhengwen";
				width: 600px;
				height: 450px;
				line-height: 50px;
				float: left;
				}
				.layui-input-inline input{
					height: 50px; 
					width: 320px; 
					border-radius: 18px;
					border: solid 1px #E5E5E5;
					font-size: 20px;
					background: #FFFFFF;
					box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
					-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;  
					text-align: center;
					font-family: "仿宋";
					}

</style>
</head>
<body>

<ul class="layui-nav" style="background-color: IndianRed4; position: fixed;width: 100%;z-index: 1200;">
  <li class="layui-nav-item">
    <a href="/index.html">主页</a>
  </li>
	 <li class="layui-nav-item">
	  <a href="/index.html#yuyue">预约</a>
	</li>
	 <li class="layui-nav-item">
	  <a href="/index.html#jianjie">简介</a>
	</li>
	 <li class="layui-nav-item">
	  <a href="/index.html#wenquan">温泉</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/index.html#meishi">美食</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/index.html#jiaotong">交通</a>
	</li>
	<li class="layui-nav-item">
	  <a href="/order/allOpinion">查看评价</a>
	</li>
  <li class="layui-nav-item" lay-unselect="" style="float: right;">
    <a href="javascript:;"><img src="/img/ic_sanso.svg" class="layui-nav-img">我的账号</a>
    <dl class="layui-nav-child">
      <shiro:hasRole name="group"><dd><a href="/mycart.html">购物车</a></dd></shiro:hasRole>
      <dd><a href="/memberinfo.html">个人主页</a></dd>
      <dd><a href="/order/all">历史订单</a></dd>
      <dd><a href="/logout">注销</a></dd>
    </dl>
  </li>
</ul>
<br/>
<br/>
<br/>
<div class="layui-carousel" id="test10" style="margin: 0px auto;">
  <div carousel-item="">
    <div style="background-color: #FFFFFF;"><img src="img/9d758701gy1fynb2qj3wvj218w0u0gzf.jpg" style="width: 1100px;margin-left: 100px;"></div>
    <div style="background-color: #FFFFFF;"><img src="img/111923474.jpg" style="width: 1100px;margin-left: 100px;"></div>
    <div style="background-color: #FFFFFF;"><img src="img/111919456.jpg" style="width: 1100px;margin-left: 100px;"></div>
		<div style="background-color: #FFFFFF;"><img src="img/111918719.jpg" style="width: 1100px;margin-left: 100px;"></div>
  </div>
</div>
<div class="test" id="yuyue">
	<img src="img/ic_honkan.svg" width="50px">&nbsp;新日暮里温泉馆
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="part2">
	
    <div class="layui-inline" style="line-height: 50px;width: 100%; ">
			 <div class="layui-input-inline" style="">
			 <font size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;入住日期:</font>
			</div>
      <div class="layui-input-inline" style="text-align: center;">
        <input type="text"  id="test6" placeholder="">
      </div>
			<div class="layui-input-inline">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="mydate" onclick="findroomtype()" value="預約"/>
			</div>
			</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="test" id="jianjie">
</div>
<div class="test">
	<img src="img/icon.png">简介
</div>
<br/>
<div class="part2">
	<font size="5" color="#9F9F9F">&nbsp&nbsp&nbsp&nbsp&nbsp中国屈指可数的温泉泉質</font>
<br/>
<br/>
<font size="8">&nbsp关于&nbsp新日暮里<br/></font>
<br/>
<font size="6">&nbsp成都最古老的建筑温泉旅館<br/></font>
<br/>
<br/>
</div>
<div class="part2" style="line-height: 50px;">
<font size="4">
日暮里由主楼、山庄、佳松亭3部分组合而成。<br/>
建造于1691年的主楼，作为日本最古老的温泉旅馆建筑而享誉盛名。<br/>
建造于1936年的山庄，荟萃了当时工匠们的技术精髓，各个房间的门窗都堪称精美的工艺品，<br/>
此建筑受到了历代的政治家以及著名的作家等名人的喜爱。<br/>
佳松亭是一间正统的温泉旅馆，建造于庄严的松林之中。<br/>
它伫立在用地内的地势最高处，是旅馆中最新的建筑，客人可以在享受美景的同时度过一段自由惬意的时光。<br/>
主楼、山庄、元禄的温泉因其悠久的历史及别具心裁的建筑设计而分别被指定为文化遗产。<br/></font>
</div>
<br/>
<br/>
<br/>
<div class="test" id="wenquan">
</div>
<div class="test">
	<img src="img/icon.png">温泉
</div>
<br/>
<br/>
<div class="part">
<div class="part1">
<img src="img/23.jpg" width="550px"/>
</div>
<div class="part1">
<font size="4">
日暮里所在的四万温泉是中国首个国家指定的国民保养温泉，据称就如同地名所示该温泉能够“治愈四万种病症”，可知其温泉水质量之高。<br />
此外，由于积善馆的自家源泉水量丰富，平均每分种可供温泉800公升，因此客人们可尽情享用高品质的非循环温泉水。<br />
国内媒体盛赞此温泉为“全国第一、有效治愈抑郁症的16家名温泉、有效改善肠胃的3大温泉、美丽的秘方温泉”等等，赞赏无数。<br />
</font>
</div>
</div>
<br/>
<br/>
<br/>
<div class="test" id="meishi">
</div>
<div class="test">
	<img src="img/icon.png">美食
</div>
<br/>
<br/>
<div class="part">
<div class="part1">
<font size="4">
清静娴雅的氛围中，客人的三餐将由女招待送至各位房中以供 享用。<br/>
三餐使用精挑细选的食材，不惜花费时间精心烹调而成。<br/>
客人可从中感受到厨师对待料理的“精益求精”的真诚态度。 <br/>
在例行的聚会上，我们更无丝毫妥协地坚持让各位品尝到“和 食的精髓”。<br/>
</font>
</div>
<div class="part1">
<img src="img/19.jpg" width="550px"/>
</div>
</div>
<br/>
<br/>
<br/>
<div class="test" id="jiaotong">
</div>
<div class="test">
	<img src="img/icon.png">交通
</div>
<br/>
<br/>
<div class="part">
	<div class="part1">
	<div id="container" style="height: 370px;width: 400px;margin-left: 60px;">
	</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="mypath(zhi)">去这里</button>
	</div>
<div class="part1">
<font size="4">
新日暮里温泉酒店（成都）<br/>
ADDRESS：〒377-0601 四川省成都市高新区环球中心<br/>
TEL : +81-279-64-2101<br/>
E-MAIL : nippori@hotmail.com<br/>
</font>
</div>
</div>
<br/>
<br/>
<br/>
<script src="layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //常规轮播
  carousel.render({
    elem: '#test1'
    ,arrow: 'always'
  });
  
  //改变下时间间隔、动画类型、高度
  carousel.render({
    elem: '#test2'
    ,interval: 1800
    ,anim: 'fade'
    ,height: '120px'
  });
  
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: '500px'
    ,interval: 5000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //日期范围
  laydate.render({
    elem: '#test6'
    ,range: true
  });

});

	//根据日期查询可入住的房间
	function findroomtype(){
		var mydate=$("#test6").val();
 		$.ajax({
  			url:"user/sf",
  			data:{date:mydate},
  			type:"post",
  			success:function(data){
  				if(data=='个人'){
  					window.location.href="/type2?date="+mydate;
  				}else if(data=='团体'){
  					window.location.href="/type?date="+mydate;
  				}
  			}
  			})
		//window.location.href="/type?date="+mydate;
	}
</script>
</body>
</html>
